import React from 'react'
import { Carousel, WingBlank } from 'antd-mobile';
class Com extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      imgHeight : '.84rem'
    }
  }
  render() {
    const { bannerList } = this.props
    const {  imgHeight } = this.state
    return (
      <WingBlank>
        <Carousel
          autoplay={false}
          slideWidth = "100%"
          infinite
          dotStyle={{borderRadius:"0",backgroundColor:"#666666",width:".09rem",height:".02rem",transform:"transLateY(.65rem)"}}
          dotActiveStyle={{backgroundColor:"#00B145",borderRadius:"0",width:".09rem",height:".02rem",transform:"transLateY(.65rem)"}}
          beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
          afterChange={index => console.log('slide to', index)}
        >
          {bannerList.map(val => (
            <div
              key={val}
              style={{ display: 'inline-block',width: '1.11rem'}}
            >
              {/* <p>wwww</p> */}
              <img
                src={ val }
                alt=""
                style={{ width: '1.11rem', height: imgHeight , verticalAlign: 'top' }}
                onLoad={() => {
                  // fire window resize event to change height
                  window.dispatchEvent(new Event('resize'));
                  // this.setState({ imgHeight: 'auto' });
                }}
              />
            </div>
          ))}
        </Carousel>
      </WingBlank>
    );
  }
}

export default Com